<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MyOrder</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/res/css/selectInformation.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/res/css/checkIn.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/res/css/checkOut.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/res/css/myOrder.css">
    <style>
        [v-cloak] {
            display:none;
        }
    </style>
</head>
<body  class="bodyType">
    <div class="title">
        <samp>我的订单</samp>
    </div>
    <div style="width: 1000px;" id="myOrder" v-cloak>
        <div class="total">
            <div class="checkInTitel">
                退订
            </div> 
            <hr style="color: #f1f1f1; width: 100%;">
            <div class="relet">
                <div style="margin-top: 6px;">
                    <label for="payment">房号：</label>
                    <input type="text" v-model="overRoomNum" style="height: 20px;" name="payment" id="payment">
                    <input type="button"  @click="unsubscribe" value="退订">
                </div>
                <!-- 付款框 -->
                <div style="margin-top: 6px;">
                    <label for="pay">退款：</label>
                    <div class="perpay" id="pay">{{repay}}</div>
                </div>
            </div>
        </div>
        <!-- 未结束订单 -->
        <div class="total">
            <div class="checkInTitel">
                未结束订单
            </div> 
            <hr style="color: #f1f1f1; width: 100%;">
            <div class="userCondition">
                <div class="showInformation">
                    <div style="border:  #f1f1f1 solid 1px;width: 65%;">
                        <table style="padding: 2px;" class="selectTable">
                            <tr>
                                <td>姓名</td>
                                <td>房号</td>
                                <td>入住时间</td>
                                <td>入住天数</td>
                                <td>租金</td>
                                <td>实付</td>
                            </tr>
                            <tr v-for="item in unfinishMyOrder">
                                <td>{{item.name}}</td>
                                <td>{{item.roomNum}}</td>
                                <td>{{item.beginTime}}</td>
                                <td>{{item.stayDay}}</td>
                                <td>{{item.retal}}</td>
                                <td>{{item.pay}}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- 历史订单 -->
        <div class="total">
            <div class="checkInTitel">
                历史订单
            </div> 
            <hr style="color: #f1f1f1; width: 100%;">
            <div class="userCondition">
                <div class="showInformation">
                    <div style="border:  #f1f1f1 solid 1px;width: 65%;">
                        <table style="padding: 2px;" class="selectTable">
                            <tr>
                                <td>姓名</td>
                                <td>房号</td>
                                <td>入住时间</td>
                                <td>入住天数</td>
                                <td>租金</td>
                                <td>实付</td>
                            </tr>
                            <tr v-for="item in finishMyOrder">
                                <td>{{item.name}}</td>
                                <td>{{item.roomNum}}</td>
                                <td>{{item.beginTime}}</td>
                                <td>{{item.stayDay}}</td>
                                <td>{{item.retal}}</td>
                                <td>{{item.pay}}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src = "${pageContext.request.contextPath}/res/js/jquery.js"></script>
    <script src="${pageContext.request.contextPath}/res/js/vue.js"></script>
    <script src="${pageContext.request.contextPath}/res/js/myOrder.js"></script>
</body>
</html>